<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!DOCTYPE HTML>
<html>
<!--
Test GripArray rep
-->
<head>
  <meta charset="utf-8">
  <title>Rep test - GripArray</title>
  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
</head>
<body>
<pre id="test">
<script src="head.js" type="application/javascript;version=1.8"></script>
<script type="application/javascript;version=1.8">
window.onload = Task.async(function* () {
  let { Rep } = browserRequire("devtools/client/shared/components/reps/rep");
  let { GripArray } = browserRequire("devtools/client/shared/components/reps/grip-array");

  let componentUnderTest = GripArray;
  const maxLength = {
    short: 3,
    long: 300
  };

  try {
    yield testBasic();

    // Test property iterator
    yield testMaxProps();
    yield testMoreThanShortMaxProps();
    yield testMoreThanLongMaxProps();
    yield testRecursiveArray();
    yield testPreviewLimit();
    yield testNamedNodeMap();
    yield testNodeList();
    yield testDocumentFragment();
  } catch(e) {
    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
  } finally {
    SimpleTest.finish();
  }

  function testBasic() {
    // Test array: `[]`
    const testName = "testBasic";

    // Test that correct rep is chosen
    const gripStub = getGripStub("testBasic");
    const renderedRep = shallowRenderComponent(Rep, { object: gripStub });
    is(renderedRep.type, GripArray.rep, `Rep correctly selects ${GripArray.rep.displayName}`);

    // Test rendering
    const defaultOutput = `Array []`;

    const modeTests = [
      {
        mode: undefined,
        expectedOutput: defaultOutput,
      },
      {
        mode: "tiny",
        expectedOutput: `[]`,
      },
      {
        mode: "short",
        expectedOutput: defaultOutput,
      },
      {
        mode: "long",
        expectedOutput: defaultOutput,
      }
    ];

    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
  }

  function testMaxProps() {
    // Test array: `[1, "foo", {}]`;
    const testName = "testMaxProps";

    const defaultOutput = `Array [ 1, "foo", Object ]`;

    const modeTests = [
      {
        mode: undefined,
        expectedOutput: defaultOutput,
      },
      {
        mode: "tiny",
        expectedOutput: `[3]`,
      },
      {
        mode: "short",
        expectedOutput: defaultOutput,
      },
      {
        mode: "long",
        expectedOutput: defaultOutput,
      }
    ];

    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
  }

  function testMoreThanShortMaxProps() {
    // Test array = `["test string"…] //4 items`
    const testName = "testMoreThanShortMaxProps";

    const defaultOutput = `Array [ ${Array(maxLength.short).fill("\"test string\"").join(", ")}, 1 more… ]`;

    const modeTests = [
      {
        mode: undefined,
        expectedOutput: defaultOutput,
      },
      {
        mode: "tiny",
        expectedOutput: `[${maxLength.short + 1}]`,
      },
      {
        mode: "short",
        expectedOutput: defaultOutput,
      },
      {
        mode: "long",
        expectedOutput: `Array [ ${Array(maxLength.short + 1).fill("\"test string\"").join(", ")} ]`,
      }
    ];

    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
  }

  function testMoreThanLongMaxProps() {
    // Test array = `["test string"…] //301 items`
    const testName = "testMoreThanLongMaxProps";

    const defaultShortOutput = `Array [ ${Array(maxLength.short).fill("\"test string\"").join(", ")}, ${maxLength.long + 1 - maxLength.short} more… ]`;
    const defaultLongOutput = `Array [ ${Array(maxLength.long).fill("\"test string\"").join(", ")}, 1 more… ]`;

    const modeTests = [
      {
        mode: undefined,
        expectedOutput: defaultShortOutput,
      },
      {
        mode: "tiny",
        expectedOutput: `[${maxLength.long + 1}]`,
      },
      {
        mode: "short",
        expectedOutput: defaultShortOutput,
      },
      {
        mode: "long",
        expectedOutput: defaultLongOutput
      }
    ];

    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
  }

  function testRecursiveArray() {
    // Test array = `let a = []; a = [a]`
    const testName = "testRecursiveArray";

    const defaultOutput = `Array [ [1] ]`;

    const modeTests = [
      {
        mode: undefined,
        expectedOutput: defaultOutput,
      },
      {
        mode: "tiny",
        expectedOutput: `[1]`,
      },
      {
        mode: "short",
        expectedOutput: defaultOutput,
      },
      {
        mode: "long",
        expectedOutput: defaultOutput,
      }
    ];

    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
  }

  function testPreviewLimit() {
    const testName = "testPreviewLimit";

    const shortOutput = `Array [ 0, 1, 2, 8 more… ]`;
    const defaultOutput = `Array [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 more… ]`;

    const modeTests = [
      {
        mode: undefined,
        expectedOutput: shortOutput,
      },
      {
        mode: "tiny",
        expectedOutput: `[11]`,
      },
      {
        mode: "short",
        expectedOutput: shortOutput,
      },
      {
        mode: "long",
        expectedOutput: defaultOutput,
      }
    ];

    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
  }

  function testNamedNodeMap() {
    const testName = "testNamedNodeMap";

    const defaultOutput = `NamedNodeMap [ class="myclass", cellpadding="7", border="3" ]`;

    const modeTests = [
      {
        mode: undefined,
        expectedOutput: defaultOutput,
      },
      {
        mode: "tiny",
        expectedOutput: `[3]`,
      },
      {
        mode: "short",
        expectedOutput: defaultOutput,
      },
      {
        mode: "long",
        expectedOutput: defaultOutput,
      }
    ];

    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
  }

  function testNodeList() {
    const testName = "testNodeList";
    const defaultOutput = "NodeList [ button#btn-1.btn.btn-log, " +
      "button#btn-2.btn.btn-err, button#btn-3.btn.btn-count ]";

    const modeTests = [
      {
        mode: undefined,
        expectedOutput: defaultOutput,
      },
      {
        mode: "tiny",
        expectedOutput: `[3]`,
      },
      {
        mode: "short",
        expectedOutput: defaultOutput,
      },
      {
        mode: "long",
        expectedOutput: defaultOutput,
      }
    ];

    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
  }

  function testDocumentFragment() {
    const testName = "testDocumentFragment";

    const defaultOutput = "DocumentFragment [ li#li-0.list-element, " +
      "li#li-1.list-element, li#li-2.list-element, 2 more… ]";

    const longOutput = "DocumentFragment [ " +
      "li#li-0.list-element, li#li-1.list-element, li#li-2.list-element, " +
      "li#li-3.list-element, li#li-4.list-element ]";

    const modeTests = [
      {
        mode: undefined,
        expectedOutput: defaultOutput,
      },
      {
        mode: "tiny",
        expectedOutput: `[5]`,
      },
      {
        mode: "short",
        expectedOutput: defaultOutput,
      },
      {
        mode: "long",
        expectedOutput: longOutput,
      }
    ];

    testRepRenderModes(modeTests, testName, componentUnderTest, getGripStub(testName));
  }

  function getGripStub(functionName) {
    switch (functionName) {
      case "testBasic":
        return {
          "type": "object",
          "class": "Array",
          "actor": "server1.conn0.obj35",
          "extensible": true,
          "frozen": false,
          "sealed": false,
          "ownPropertyLength": 1,
          "preview": {
            "kind": "ArrayLike",
            "length": 0,
            "items": []
          }
        };

      case "testMaxProps":
        return {
          "type": "object",
          "class": "Array",
          "actor": "server1.conn1.obj35",
          "extensible": true,
          "frozen": false,
          "sealed": false,
          "ownPropertyLength": 4,
          "preview": {
            "kind": "ArrayLike",
            "length": 3,
            "items": [
              1,
              "foo",
              {
                "type": "object",
                "class": "Object",
                "actor": "server1.conn1.obj36",
                "extensible": true,
                "frozen": false,
                "sealed": false,
                "ownPropertyLength": 0
              }
            ]
          }
        };

      case "testMoreThanShortMaxProps":
        let shortArrayGrip = {
          "type": "object",
          "class": "Array",
          "actor": "server1.conn1.obj35",
          "extensible": true,
          "frozen": false,
          "sealed": false,
          "ownPropertyLength": 4,
          "preview": {
            "kind": "ArrayLike",
            "length": maxLength.short + 1,
            "items": []
          }
        };

        // Generate array grip with length 4, which is more that the maximum
        // limit in case of the 'short' mode.
        for (let i = 0; i < maxLength.short + 1; i++) {
          shortArrayGrip.preview.items.push("test string");
        }

        return shortArrayGrip;

      case "testMoreThanLongMaxProps":
        let longArrayGrip = {
          "type": "object",
          "class": "Array",
          "actor": "server1.conn1.obj35",
          "extensible": true,
          "frozen": false,
          "sealed": false,
          "ownPropertyLength": 4,
          "preview": {
            "kind": "ArrayLike",
            "length": maxLength.long + 1,
            "items": []
          }
        };

        // Generate array grip with length 301, which is more that the maximum
        // limit in case of the 'long' mode.
        for (let i = 0; i < maxLength.long + 1; i++) {
          longArrayGrip.preview.items.push("test string");
        }

        return longArrayGrip;

      case "testPreviewLimit":
        return {
          "type": "object",
          "class": "Array",
          "actor": "server1.conn1.obj31",
          "extensible": true,
          "frozen": false,
          "sealed": false,
          "ownPropertyLength": 12,
          "preview": {
            "kind": "ArrayLike",
            "length": 11,
            "items": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
          }
        };

      case "testRecursiveArray":
        return {
          "type": "object",
          "class": "Array",
          "actor": "server1.conn3.obj42",
          "extensible": true,
          "frozen": false,
          "sealed": false,
          "ownPropertyLength": 2,
          "preview": {
            "kind": "ArrayLike",
            "length": 1,
            "items": [
              {
                "type": "object",
                "class": "Array",
                "actor": "server1.conn3.obj43",
                "extensible": true,
                "frozen": false,
                "sealed": false,
                "ownPropertyLength": 2,
                "preview": {
                  "kind": "ArrayLike",
                  "length": 1
                }
              }
            ]
          }
        };

      case "testNamedNodeMap":
        return {
          "type": "object",
          "class": "NamedNodeMap",
          "actor": "server1.conn3.obj42",
          "extensible": true,
          "frozen": false,
          "sealed": false,
          "ownPropertyLength": 6,
          "preview": {
            "kind": "ArrayLike",
            "length": 3,
            "items": [
              {
                "type": "object",
                "class": "Attr",
                "actor": "server1.conn3.obj43",
                "extensible": true,
                "frozen": false,
                "sealed": false,
                "ownPropertyLength": 0,
                "preview": {
                  "kind": "DOMNode",
                  "nodeType": 2,
                  "nodeName": "class",
                  "value": "myclass"
                }
              },
              {
                "type": "object",
                "class": "Attr",
                "actor": "server1.conn3.obj44",
                "extensible": true,
                "frozen": false,
                "sealed": false,
                "ownPropertyLength": 0,
                "preview": {
                  "kind": "DOMNode",
                  "nodeType": 2,
                  "nodeName": "cellpadding",
                  "value": "7"
                }
              },
              {
                "type": "object",
                "class": "Attr",
                "actor": "server1.conn3.obj44",
                "extensible": true,
                "frozen": false,
                "sealed": false,
                "ownPropertyLength": 0,
                "preview": {
                  "kind": "DOMNode",
                  "nodeType": 2,
                  "nodeName": "border",
                  "value": "3"
                }
              }
            ]
          }
        };

      case "testNodeList":
        return {
          "type": "object",
          "actor": "server1.conn1.child1/obj51",
          "class": "NodeList",
          "extensible": true,
          "frozen": false,
          "sealed": false,
          "ownPropertyLength": 3,
          "preview": {
            "kind": "ArrayLike",
            "length": 3,
            "items": [
              {
                "type": "object",
                "actor": "server1.conn1.child1/obj52",
                "class": "HTMLButtonElement",
                "extensible": true,
                "frozen": false,
                "sealed": false,
                "ownPropertyLength": 0,
                "preview": {
                  "kind": "DOMNode",
                  "nodeType": 1,
                  "nodeName": "button",
                  "attributes": {
                    "id": "btn-1",
                    "class": "btn btn-log",
                    "type": "button"
                  },
                  "attributesLength": 3
                }
              },
              {
                "type": "object",
                "actor": "server1.conn1.child1/obj53",
                "class": "HTMLButtonElement",
                "extensible": true,
                "frozen": false,
                "sealed": false,
                "ownPropertyLength": 0,
                "preview": {
                  "kind": "DOMNode",
                  "nodeType": 1,
                  "nodeName": "button",
                  "attributes": {
                    "id": "btn-2",
                    "class": "btn btn-err",
                    "type": "button"
                  },
                  "attributesLength": 3
                }
              },
              {
                "type": "object",
                "actor": "server1.conn1.child1/obj54",
                "class": "HTMLButtonElement",
                "extensible": true,
                "frozen": false,
                "sealed": false,
                "ownPropertyLength": 0,
                "preview": {
                  "kind": "DOMNode",
                  "nodeType": 1,
                  "nodeName": "button",
                  "attributes": {
                    "id": "btn-3",
                    "class": "btn btn-count",
                    "type": "button"
                  },
                  "attributesLength": 3
                }
              }
            ]
          }
        };

      case "testDocumentFragment":
        return {
          "type": "object",
          "actor": "server1.conn1.child1/obj45",
          "class": "DocumentFragment",
          "extensible": true,
          "frozen": false,
          "sealed": false,
          "ownPropertyLength": 0,
          "preview": {
            "kind": "DOMNode",
            "nodeType": 11,
            "nodeName": "#document-fragment",
            "childNodesLength": 5,
            "childNodes": [
              {
                "type": "object",
                "actor": "server1.conn1.child1/obj46",
                "class": "HTMLLIElement",
                "extensible": true,
                "frozen": false,
                "sealed": false,
                "ownPropertyLength": 0,
                "preview": {
                  "kind": "DOMNode",
                  "nodeType": 1,
                  "nodeName": "li",
                  "attributes": {
                    "id": "li-0",
                    "class": "list-element"
                  },
                  "attributesLength": 2
                }
              },
              {
                "type": "object",
                "actor": "server1.conn1.child1/obj47",
                "class": "HTMLLIElement",
                "extensible": true,
                "frozen": false,
                "sealed": false,
                "ownPropertyLength": 0,
                "preview": {
                  "kind": "DOMNode",
                  "nodeType": 1,
                  "nodeName": "li",
                  "attributes": {
                    "id": "li-1",
                    "class": "list-element"
                  },
                  "attributesLength": 2
                }
              },
              {
                "type": "object",
                "actor": "server1.conn1.child1/obj48",
                "class": "HTMLLIElement",
                "extensible": true,
                "frozen": false,
                "sealed": false,
                "ownPropertyLength": 0,
                "preview": {
                  "kind": "DOMNode",
                  "nodeType": 1,
                  "nodeName": "li",
                  "attributes": {
                    "id": "li-2",
                    "class": "list-element"
                  },
                  "attributesLength": 2
                }
              },
              {
                "type": "object",
                "actor": "server1.conn1.child1/obj49",
                "class": "HTMLLIElement",
                "extensible": true,
                "frozen": false,
                "sealed": false,
                "ownPropertyLength": 0,
                "preview": {
                  "kind": "DOMNode",
                  "nodeType": 1,
                  "nodeName": "li",
                  "attributes": {
                    "id": "li-3",
                    "class": "list-element"
                  },
                  "attributesLength": 2
                }
              },
              {
                "type": "object",
                "actor": "server1.conn1.child1/obj50",
                "class": "HTMLLIElement",
                "extensible": true,
                "frozen": false,
                "sealed": false,
                "ownPropertyLength": 0,
                "preview": {
                  "kind": "DOMNode",
                  "nodeType": 1,
                  "nodeName": "li",
                  "attributes": {
                    "id": "li-4",
                    "class": "list-element"
                  },
                  "attributesLength": 2
                }
              }
            ]
          }
        };
    }
    return null;
  }
});
</script>
</pre>
</body>
</html>
